<template>
    <div>
        <p class="content-box" :class="{ 'active': active }">
            <span>
                <slot></slot>
            </span>
        <p class="icon">
            <el-button circle size="small" :icon="Edit" @click="$emit('edit')"></el-button>
            <el-popconfirm title="确认删除这个图库？" confirm-button-text="确认" cancel-button-text="不确认" @confirm="$emit('remove')">
                <template #reference>
                    <el-button circle size="small" :icon="Close"></el-button>
                </template>
            </el-popconfirm>
        </p>
        </p>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { Edit, Close } from '@element-plus/icons-vue'

const page = ref<number>(1)
const galleryList = ref()

defineProps({
    active: {
        type: Boolean,
        default: false
    }
})
defineEmits(['edit', 'remove'])


</script>
<style lang='scss' scoped>
.content-box {
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin-top: 5px;
    line-height: 40px;

    .icon {
        >.el-button:nth-child(2) {
            margin-right: 10px;
        }
    }

}

.content-box:hover,
.active {
    background-color: rgb(194, 250, 231);
}
</style>